<template>
    <div class="tree mr-4">
        <base-tree :apiPrefix="apiPrefix" :title="title" ref="treeRef" :showRoot="showRoot" @currentChange="selectNode">
            <template #buttons>
                <el-link type="primary" @click="showNew">新增</el-link>
            </template>

            <template #default="{ node, data }">
                <div class="item">
                    <span class="ellipsis-1 label">
                        <ElIcon>
                            <Document v-if="node.isLeaf" />
                            <Folder v-else-if="!node.expanded" />
                            <FolderOpened v-else />
                        </ElIcon>
                        <span>{{ node.label }}</span>
                    </span>
                    <span class="icons" v-if="data.id">
                        <el-icon class="icon color-primary" @click="goEdit(data)">
                            <Edit />
                        </el-icon>
                        <el-icon class="icon color-red" @click="doDelete(data)">
                            <Delete />
                        </el-icon>
                    </span>
                </div>
            </template>
        </base-tree>

        <new-item
            v-model:visible="visible"
            v-model="editingRow"
            @change="reloadTree"
            :parent="currentNode"
            :apiPrefix="apiPrefix"
            :fields="newFields"
        ></new-item>
    </div>
</template>
<script setup>
import BaseTree from "@/components/base-tree.vue";
import newItem from "./new.vue";
import https from "@/utils/https";
import * as _ from "lodash";
import { ElMessageBox, ElMessage } from "element-plus";

const props = defineProps({
    apiPrefix: { type: String, required: true },
    title: { type: String },
    showRoot: { type: Boolean, default: true },
    newFields: { type: Array },
});
const currentNode = defineModel();
const visible = ref(false);
const emits = defineEmits(["select"]);
const editingRow = ref({});
const treeRef = ref();

function showNew() {
    editingRow.value = {};
    visible.value = true;
}

function selectNode(type) {
    currentNode.value = type;
    emits("select", type);
}

function reloadTree() {
    treeRef.value.reload();
}

function doDelete(row) {
    ElMessageBox.confirm("确定删除当前记录？").then(() => {
        https.del(props.apiPrefix + "/delete/" + row.id).then(() => {
            ElMessage.success("删除成功");
            reloadTree();
        });
    });
}

function goEdit(row) {
    editingRow.value = _.cloneDeep(row);
    visible.value = true;
}
</script>

<style lang="scss" scoped>
.tree {
    background-color: #fefefe;
    border: 1px solid #f1f1f1;
    border-radius: 8px;

    :deep() {
        .tree-panel {
            border: none;
            margin-right: 0;
        }
    }
}

.item {
    width: 100%;
    display: flex;
    position: relative;
    height: 36px;
    line-height: 36px;

    .label {
        display: flex;
        align-items: center;
    }

    &:hover {
        .icons {
            display: inline;
        }
    }

    .icons {
        position: absolute;
        right: 10px;
        display: none;

        .icon {
            margin-left: 8px;
            display: inline-block;
        }
    }
}
</style>
